<!--
 * @Description: 
 * @Author: ouyaping
 * @Date: 2025-10-04 20:54:06
 * @LastEditors: ouyaping
 * @LastEditTime: 2025-11-12 00:06:24
-->
<template>
    <div class="wel-page">
        <!-- 顶部 -->
        <div class="top">
            <Top></Top>
        </div>
        <div class="bottom">
            <!-- 左侧 -->
            <div class="left">
                <div>
                    <i class="subTime">设备分析</i>
                    <div class="model1" v-if="!loading">
                        <div v-for="item of model1Data.list">
                            <img :src="item.img" alt="">
                            <span>{{ item.value }}</span>
                            <i>{{ item.name }}</i>
                        </div>
                    </div>
                    <div class="chart1-model" v-if="!loading">
                        <v-chart class="chart1" :option="option1" autoresize />
                        <div class="text">
                            <p v-for="item of model1Data.list">
                                <span>{{ item.name }}</span>
                                <span>{{ item.value }}</span>
                            </p>
                        </div>
                    </div>
                </div>
                <div>
                    <i class="subTime">无线质量监控</i>
                    <div class="model2">
                        <div v-for="item of deptQualityVOS">
                            <img src="../../images/jigou@2x.png" alt="">
                            <span>{{ item.deptName }}</span>
                            <div>
                                <div :style="{ width: `${item.left}%` }">{{ item.onlineCount }}</div>
                                <div :style="{ width: `${item.right}%` }">{{ item.offlineCount }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 中间 -->
            <div class="center">
                <div id="map" style="width: 100%; height:100%;"></div>
                <div class="bg"></div>
            </div>
            <!-- 右侧 -->
            <div class="right">
                <div>
                    <i class="subTime">问题分析</i>
                    <div class="chart2-model">
                        <v-chart class="chart2" :option="option2" autoresize />
                        <div class="text">
                            <p v-for="item of opinionVO.list">
                                <span>{{ item.name }}</span>
                                <span>{{ item.proportion }}%</span>
                                <span class="color">{{ item.value }}</span>
                            </p>
                        </div>
                    </div>
                    <i class="subTime">设备使用时常</i>
                    <div class="model4" id="scrollable-content" @mouseenter="mouseenter" @mouseleave="mouseleave">
                        <div v-for="(item, index) of deviceUseVOS" @click="clickList(item, index)">
                            <span>{{ item.deviceCode }}</span>
                            <div>
                                <div :style="{ width: `${item.proportion}%` }"></div>
                                <span :style="{ left: `${item.proportion}%` }"></span>
                            </div>
                            <p>{{ item.runTime }}小时</p>
                        </div>
                    </div>
                </div>
                <div>
                    <i class="subTime">区域设备日志</i>

                    <div class="title">
                        <span>设备编码</span>
                        <span>描述</span>
                        <span>时间</span>
                    </div>
                    <div class="model3">
                        <div v-for="(item, index) of logs">
                            <el-tooltip class="box-item" effect="dark" :content="item.deviceCode" placement="top-start">
                                <span>{{ item.deviceCode }}</span>
                            </el-tooltip>
                            <el-tooltip class="box-item" effect="dark" :content="item.content" placement="top-start">
                                <span>{{ item.content }}</span>
                            </el-tooltip>
                            <el-tooltip class="box-item" effect="dark" :content="item.createTime" placement="top-start">
                                <span>{{ item.createTime }}</span>
                            </el-tooltip>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, computed, onBeforeUnmount } from 'vue'
import { homeLargeScreen, deviceStatus } from "@/api/desk/welIndex";
import zhengchangshebei from "@/images/zhengchangshebei@2x.png";
import zaixian from "@/images/zaixian@2x.png";
import lixian from "@/images/lixian@2x.png";
import guzhang from "@/images/guzhang@2x.png";

import { use } from 'echarts/core';
import { PieChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';
import {
    TooltipComponent,
    LegendComponent,
    GraphicComponent
} from 'echarts/components';
import VChart from 'vue-echarts';

// 注册所有必要模块
use([
    CanvasRenderer,
    PieChart,
    TooltipComponent,
    LegendComponent,
    GraphicComponent
]);

import Top from './top.vue'

// loading
const loading = ref(true)

// 检测元素是否出现垂直滚动条
const hasVerticalScrollbar = (element) => {
    return element.scrollHeight > element.clientHeight;
}

const scrollInterval = ref(null)
// 平滑滚动函数
const startAutoScroll = (element, speed = 20) => {
    if (!hasVerticalScrollbar(element)) {
        console.log('元素没有垂直滚动条');
        return;
    }

    scrollInterval.value = setInterval(() => {
        // 检查是否到达底部
        if (element.scrollTop + element.clientHeight + 5 >= element.scrollHeight) {
            element.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        } else {
            element.scrollBy({
                top: speed,
                behavior: 'smooth'
            });
        }

    }, 2000); // 每秒执行一次
}

const startScroll = () => {
    const scrollableElement = document.getElementById('scrollable-content');
    startAutoScroll(scrollableElement);
}

const datas: any = ref({})
const model1Data = computed(() => {
    const list: any = [
        {
            value: datas.value.onlineCount || 0,
            img: zaixian,
            name: '在线'
        },
        {
            value: datas.value.faultCount || 0,
            img: lixian,
            name: '离线'
        },
        {
            value: datas.value.offlineCount || 0,
            img: guzhang,
            name: '故障'
        },
    ]
    const allNumSum = list.reduce((sum, item) => sum + item.value, 0);
    return {
        allNum: allNumSum,
        list: list.map(item => {
            item.proportion = (Number(item.value) / allNumSum * 100).toFixed(2)
            return item
        })
    }
})

const logs = computed(() => {
    const vos = datas.value.deviceCommandLogVOS
    return vos
})

const deptQualityVOS = computed(() => {
    const vos = datas.value.deptQualityVOS
    return vos.map((item) => {
        const allNumSum = item.onlineCount + item.offlineCount;
        item.left = item.onlineCount / allNumSum * 100
        item.right = item.offlineCount / allNumSum * 100
        return item
    })
})

const opinionVO = computed(() => {
    const list: any = [
        {
            value: datas.value.opinionVO.processed || 0,
            name: '已处理'
        },
        {
            value: datas.value.opinionVO.unprocessed || 0,
            name: '未处理'
        }
    ]
    const allNumSum = datas.value.opinionVO.total
    return {
        allNum: allNumSum,
        list: list.map(item => {
            item.proportion = (Number(item.value) / allNumSum * 100).toFixed(2)
            return item
        })
    }
})

const deviceUseVOS = computed(() => {
    const vos = datas.value.deviceUseVOS
    const allNumSum = vos.reduce((sum, item) => sum + item.runTime, 0);
    return vos.map((item) => {
        item.proportion = item.runTime / allNumSum * 100
        return item
    })
})

const colorPalette = ['#3FFFB4', '#3F8CFF', '#ECFE53']
const option2 = computed(() => {
    return {
        color: colorPalette, // 应用自定义色板
        graphic: {
            type: 'text',
            left: 'center',
            top: 'center',
            style: {
                text: `${opinionVO.value.allNum}\n总数量`,
                textAlign: 'center',
                fill: '#fff',
                fontSize: 18
            }
        },
        series: [{
            type: 'pie',
            radius: ['45%', '65%'],
            label: {
                show: false
            },
            roseType: 'radius',
            itemStyle: { borderRadius: 6 },
            data: opinionVO.value.list,
        }]
    }
});
const option1 = computed(() => {
    return {
        color: colorPalette, // 应用自定义色板
        graphic: {
            type: 'text',
            left: 'center',
            top: 'center',
            style: {
                text: model1Data.value.allNum,
                textAlign: 'center',
                fill: '#fff',
                fontSize: 18
            }
        },
        series: [{
            type: 'pie',
            radius: ['40%', '65%'],
            label: {
                show: false
            },
            roseType: 'radius',
            itemStyle: { borderRadius: 6 },
            data: model1Data.value.list,
        }]
    }
});

const indexActive = ref(0)
const clickList = (item, index) => {
    deviceStatus(item.deviceId).then((res) => {
        indexActive.value = index
        if (res.data.data) {
            addMarker({
                lng: res.data.data.longitude,
                lat: res.data.data.dimension
            }, res.data.data)
        }
    })
}

const map = ref(null)
const zoom = 12.5
const mapData = ref([{
    lng: 114.870300,
    lat: 40.764940
}])
// 添加标记的辅助函数
const addMarker = (point, item) => {
    // 重新设置地图的中心点
    console.log('========', point)
    const newCenter = new T.LngLat(point.lng, Number(point.lat) + 0.03);
    map.value.panTo(newCenter);

    // 清除现有覆盖物
    map.value.clearOverLays();
    var icon = new T.Icon({
        iconUrl: zhengchangshebei,
        iconSize: new T.Point(35, 55),
        iconAnchor: new T.Point(10, 25)
    });
    //向地图上添加自定义标注
    var marker = new T.Marker(new T.LngLat(point.lng, point.lat), { icon: icon });

    // 创建标记对象
    // const marker = new T.Marker(point);
    // 向地图添加标记
    map.value.addOverLay(marker);
    var infoWin1 = new T.InfoWindow();

    let listDom = ``
    for (let index = 0; index < item.attributeVOS.length; index++) {
        const element: any = item.attributeVOS[index];
        let value = ''
        if (["switchStatus", "onoff"].includes(element.attributeCode)) {
            value = element.value === '1' ? '开' : '关'
        }

        if (!["switchStatus", "onoff"].includes(element.attributeCode)) {
            value = `${element.value}${element.specUnitName}`
        }
        listDom += `
            <div
                style="display: flex;justify-content: space-between;font-size: 14px;color: rgba(255,255,255,0.7);">
                <span>${element.attributeName}</span>
                <span>${value}</span>
            </div>`
    }
    var sContent = `
        <div style="width: 120px;padding: 10px;position: relative;z-index: 10;">
            <i style="font-size: 22px;color: #ffffff;">${item.deviceCode}</i>
            ${listDom}
        </div>
    `
    infoWin1.setContent(sContent);
    marker.openInfoWindow(infoWin1);
    marker.addEventListener("click", function () {
        marker.openInfoWindow(infoWin1);
    });// 将标注添加到地图中
};

// 初始化地图
const initMap = () => {
    // 如果存在初始坐标，则添加标记
    const longLat = {
        lat: mapData.value[0]['lat'],
        lng: mapData.value[0]['lng']
    }
    const imageURL = "http://t0.tianditu.gov.cn/img_w/wmts?" +
        "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
        "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=830f454516160446ae0f2b007048f981";
    //创建自定义图层对象
    const lay = new T.TileLayer(imageURL, { minZoom: 1, maxZoom: 18 });
    const config = { layers: [lay] };
    // 创建地图实例
    map.value = new T.Map('map', config);

    // 设置初始中心点和缩放级别
    const initialPoint = new T.LngLat(longLat.lng, longLat.lat);
    map.value.centerAndZoom(initialPoint, zoom);
};

// 获取数据
const getHomeLargeScreen = () => {
    homeLargeScreen().then((res) => {
        datas.value = res.data.data
        loading.value = false
    })
}

getHomeLargeScreen()


// 开始轮播设备
setTimeout(() => {
    startScroll()
}, 2000)
// 加载地图
setTimeout(() => {
    initMap()
}, 500);

const timer = ref(null)
timer.value = setInterval(() => {
    getHomeLargeScreen()
}, 10000)


const mouseleave = () => {
    startScroll()
    timer.value = setInterval(() => {
        getHomeLargeScreen()
    }, 10000)
}

const mouseenter = () => {
    if (scrollInterval.value) {
        clearInterval(scrollInterval.value);
    }
    if (timer) {
        clearInterval(timer.value);
    }
}

onBeforeUnmount(() => {
    mouseenter()
})
</script>

<style lang="scss">
.tdt-infowindow-content-wrapper,
.tdt-infowindow-tip {
    background: url('../../images/tanchuang_bg@2x.png') no-repeat !important;
    background-size: 100% 100% !important;
}

.wel-page {
    height: 100%;
    width: 100%;
    background: #030e0e url('../../images/dibu@2x.png') no-repeat;
    background-size: 100%;
    background-position-y: bottom;
    color: #ffffff;
    font-size: 16px;

    .top {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 10;
        width: 100%;
        height: 110px;
        background: url('../../images/top_bg@2x.png') no-repeat;
        background-size: 100%;
        background-position-y: -5px;
    }

    .bottom {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: flex-start;

        .left,
        .right {
            width: 390px;
            height: calc(100% - 50px);
            margin: 50px 0 0 0;
            position: relative;
            z-index: 999;
        }

        .center {
            flex: 1;
            height: calc(100% - 100px);
            padding: 50px 0;
            margin: 0 -350px;
            position: relative;

            #map {
                z-index: 1 !important;
            }

            .bg {
                position: absolute;
                z-index: 10;
                width: 100%;
                top: 50px;
                bottom: 50px;
                left: 0;
                background: url('../../images/map_bg.png') no-repeat;
                background-size: 100% 100%;
            }
        }

        .left {
            padding-left: 60px;
            background: url('../../images/left@2x.png') no-repeat, linear-gradient(to right, RGBA(0, 0, 0, 1), RGBA(0, 0, 0, 0));
            background-size:
                10%,
                cover;
            background-position-y: 40%;
            display: flex;
            flex-direction: column;
            overflow: hidden;

            >div {
                flex: 1;
                height: 50%;
                display: flex;
                width: 100%;
                flex-direction: column;
            }
        }

        .right {
            background: url('../../images/right@2x.png') no-repeat, linear-gradient(to left, RGBA(0, 0, 0, 1), RGBA(0, 0, 0, 0));
            background-size:
                10%,
                cover;
            background-position-y: 40%;
            background-position-x: right;
            padding-right: 60px;
            display: flex;
            flex-direction: column;
            overflow: hidden;

            >div {
                flex: 1;
                height: 50%;
                display: flex;
                width: 100%;
                flex-direction: column;
            }
        }
    }

    .subTime {
        display: block;
        height: 30px;
        padding-left: 45px;
        font-size: 18px;
        margin-bottom: 20px;
        background: #221e1e url('../../images/title_bg@2x.png') no-repeat;
        background-size: contain;
    }

    .model1 {
        display: flex;
        justify-content: space-between;
        padding-left: 20px;
        margin-bottom: 20px;
        height: 114px;

        img {
            width: 75px;
        }

        >div {
            position: relative;

            span {
                position: absolute;
                bottom: 20px;
                left: 20px;
                font-size: 14px;
            }

            i {
                position: absolute;
                bottom: 4px;
                left: 30px;
                padding: 0;
                font-size: 12px;

                &::before {
                    content: '';
                    position: absolute;
                    width: 2px;
                    height: 2px;
                    background: red;
                    border-radius: 10px;
                    left: -7px;
                    bottom: 7px;
                }
            }

            &:nth-child(1) {
                i {
                    color: #9EFADA;

                    &::before {
                        background: #9EFADA;
                    }
                }
            }

            &:nth-child(2) {
                i {
                    color: #26A0EA;

                    &::before {
                        background: #26A0EA;
                    }
                }
            }

            &:nth-child(3) {
                i {
                    color: #FDCC3F;

                    &::before {
                        background: #FDCC3F;
                    }
                }
            }
        }
    }

    .model2 {
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
        margin: 10px;

        >div {
            display: flex;
            align-items: center;

            img {
                width: 23px;
                margin-right: 10px;
            }

            span {
                display: inline-block;
                width: 120px;
                color: #37E4E2;
                font-size: 16px;
            }

            >div {
                display: flex;
                flex: 1;
                height: 30px;
                align-items: center;

                div {
                    height: 100;
                    color: #000000;
                    color: 16px;

                    &:nth-child(1) {
                        background: linear-gradient(to right, #29313D, #3E88F6);
                        text-align: right;
                        padding-right: 5px;
                    }

                    &:nth-child(2) {
                        background: linear-gradient(to right, #3DEAA7, RGBA(61, 234, 167, 0));
                        text-indent: 5px;
                    }
                }
            }
        }
    }


    .title {
        height: 38px;
        display: flex;
        height: 38px;
        padding: 0 10px;

        span {
            display: inline-block;
            height: 100%;
            line-height: 38px;
            text-align: center;
            overflow: hidden;

            &:nth-child(1) {
                width: 32%;
            }

            &:nth-child(2) {
                width: 30%;
            }

            &:nth-child(3) {
                width: 35%;
            }
        }
    }

    .model3 {
        flex: 1;
        overflow-y: auto;
        padding: 0 10px 10px;
        display: flex;
        flex-direction: column;
        gap: 5px;
        margin-bottom: 20px;

        >div {
            display: flex;
            height: 38px;
            // background: url('../../images/liebiao@2x.png') no-repeat;
            // background-size: 100% 100%;
            margin-left: 30px;

            span {
                display: inline-block;
                height: 100%;
                line-height: 38px;
                text-align: center;
                overflow: hidden;

                &:nth-child(1) {
                    width: 32%;
                }

                &:nth-child(2) {
                    width: 30%;
                }

                &:nth-child(3) {
                    width: 35%;
                }
            }

            // &:hover {
            //     background: url('../../images/liebiao_active@2x.png') no-repeat;
            //     background-size: 100% 100%;
            // }

            // &.active {
            //     background: url('../../images/liebiao_active@2x.png') no-repeat;
            //     background-size: 100% 100%;
            // }
        }
    }

    .model4 {
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        margin-bottom: 20px;

        >div {
            display: flex;
            gap: 5px;
            align-items: center;
            margin-left: 30px;
            padding: 5px;
            cursor: pointer;

            &:hover {

                &:hover {
                    background: url('../../images/liebiao_active@2x.png') no-repeat;
                    background-size: 100% 100%;
                }
            }

            >span {
                color: #CADFE3;
                width: 100px;
                overflow: hidden;
            }

            >p {
                padding: 0;
                color: #FFFFFF;
                width: 60px;
                overflow: hidden;
                text-align: right;
                padding-right: 10px;
                margin: 0;
            }

            >div {
                position: relative;
                flex: 1;
                height: 8px;
                background: rgba(255, 255, 255, 0.08);
                border-radius: 0px 4px 4px 0px;

                >div {
                    height: 8px;
                    background: linear-gradient(to right, rgba(79, 241, 255, 0), #4FF1FF);
                    border-radius: 0px 4px 4px 0px;
                }

                >span {
                    position: absolute;
                    width: 12px;
                    height: 12px;
                    background: #FFFFFF;
                    border-radius: 50%;
                    top: -2px;
                    margin-left: -5px;
                }
            }
        }
    }
}

.chart1-model {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .text {
        width: 25%;
        display: flex;
        flex-direction: column;
        gap: 5px;
        padding-right: 30px;

        p {
            padding: 0;
            display: flex;
            align-items: center;
            justify-content: space-between;

            span {
                font-size: 16px;

                &:nth-child(1) {
                    color: #FFFFFF;
                }
            }

            &:nth-child(1) {
                span {
                    &:nth-child(2) {
                        color: #3FFFB4;
                    }
                }
            }

            &:nth-child(2) {
                span {
                    &:nth-child(2) {
                        color: #3F8CFF;
                    }
                }
            }

            &:nth-child(3) {
                span {
                    &:nth-child(2) {
                        color: #ECFE53;
                    }
                }
            }
        }
    }
}

.chart2-model {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .text {
        width: 45%;
        display: flex;
        flex-direction: column;
        gap: 5px;
        padding-right: 30px;

        p {
            padding: 0;
            display: flex;
            align-items: center;
            justify-content: space-between;

            span {
                font-size: 16px;

                &:nth-child(1) {
                    color: #FFFFFF;
                }
            }

            &:nth-child(1) {
                .color {
                    color: #3FFFB4;
                }
            }

            &:nth-child(2) {
                .color {
                    color: #3F8CFF;
                }
            }
        }
    }
}

.chart1 {
    height: 200px;
    width: 70%;
}

.chart2 {
    height: 150px;
    width: 70%;
}
</style>
